<template>
   <div>
    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news <input type="text"></li>
        <li>news <input type="text"></li>
        <li>news <input type="text"></li>
    </ul>
   </div>
</template>

<script>
    export default{
            name:'News-test',
            /* beforeDestroy(){
                console.log('news组件即将被销毁');
                clearInterval(this.timer)
            }, */
            data(){
                return{
                    opacity:1,
                }
            },
           /*  mounted() {
                this.timer=setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0) this.opacity=1
                },16)
            }, */
            activated() {
                console.log('news激活了');
                this.timer=setInterval(()=>{
                    this.opacity-=0.01
                    if(this.opacity<=0) this.opacity=1
                },16)
            },
            deactivated() {
                console.log('news失活了');
                clearInterval(this.timer)
            },
            }
</script>

<style scoped>
    a{
        text-decoration: none;
    }
</style>